<template>
  <div class="base-setting">
    <el-form
      ref="workflow"
      :model="workflow"
      :rules="rules"
      label-width="120px"
      size="mini"
      label-position="right"
    >
      <div class="setting-panel">
        <div class="panel-header">
          <p class="panel-title">时间属性调度</p>
        </div>

        <el-card>
          <el-form-item label="调度状态" prop="is_active">
            <el-radio v-model="workflow.is_paused" :label="false">启动</el-radio>
            <el-radio v-model="workflow.is_paused" :label="true">停止</el-radio>
          </el-form-item>
          <el-form-item label="开始时间" prop="start_time">
            <el-date-picker
              v-model="workflow.start_time"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="workflow.end_time"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker
          ></el-form-item>
          <el-form-item label="调度周期" prop="interval">
            <el-select
              v-model="workflow.interval"
              placeholder="请选择"
              clearable
              style="width: 100%"
              @change="intervalChange"
            >
              <el-option
                v-for="item in schedulerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="CRON表达式" prop="cron">
            <el-input v-model="workflow.cron" type="textarea"></el-input>
          </el-form-item>
        </el-card>
      </div>

      <div class="setting-panel">
        <div class="panel-header">
          <p class="panel-title">依赖属性调度</p>
        </div>
        <el-card>
          <el-form-item label="所属项目">
            <el-select
              v-model="workflow.parent_project"
              :disabled="!workflow.is_paused"
              placeholder="请选择"
              clearable
              style="width: 100%"
              @change="projectChange"
            >
              <el-option
                v-for="project in projectOptions"
                :key="project.id"
                :label="project.name"
                :value="project.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="依赖工作流">
            <el-select
              v-model="workflow.parent_id"
              :disabled="!workflow.is_paused"
              placeholder="请选择"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in workflowOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-card>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "WorkflowSettingDispatch",
  // inject: ["project_id"], // 注入项目 id
  props: {
    id: String
  },

  data() {
    return {
      workflow: {},
      schedulerList: [],
      projectOptions: [],
      workflowOptions: [],
      rules: {}
    };
  },
  watch: {
    "workflow.is_paused": {
      handler(val) {
        if (!val) {
          this.workflow.parent_project = "";
          this.workflow.parent_id = "";

          this.rules = {
            start_time: [
              { type: "date", required: true, message: "请选择开始时间", trigger: "change" }
            ],
            interval: [{ required: true, message: "请选择调度周期", trigger: "change" }],
            cron: [{ required: true, message: "请填写CRON表达式", trigger: "blur" }]
          };
        } else {
          this.rules = {};
        }
      }
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.$http.workflow.getSchedulerList().then(res => {
        this.schedulerList = res;
      });

      this.$http.workflow.getProjectOptions().then(res => {
        this.projectOptions = res;
      });

      this.$http.workflow.getWorkflowById({ id: this.id }).then(res => {
        this.workflow = res;
        if (res.parent_project) {
          this.$http.workflow.getWorkflowOptions({ project_id: res.parent_project }).then(res => {
            this.workflowOptions = res;
          });
          this.workflow.parent_project = Number(res.parent_project);
        }
        this.workflow.parent_id = res.parent_id ? Number(res.parent_id) : null;
      });
    },
    // 设置保存
    save(content) {
      if (!this.workflow.id) return;

      if (this.workflow.is_paused) {
        this.updateWorkflow(content);
      } else {
        this.$refs.workflow.validate(valid => {
          if (valid) {
            this.updateWorkflow(content);
          } else {
            return false;
          }
        });
      }
    },
    updateWorkflow(nodes) {
      let {
        is_paused,
        start_time,
        end_time,
        interval,
        cron,
        parent_project,
        parent_id
      } = this.workflow;
      this.$http.workflow
        .updateWorkflow({
          id: this.workflow.id,
          is_paused,
          start_time,
          end_time,
          interval,
          cron,
          parent_project,
          parent_id,
          content: { nodes }
        })
        .then(res => {
          this.$message({
            type: "success",
            message: "保存成功"
          });
        });
    },

    intervalChange(interval) {
      this.$http.workflow.getCorn({ interval }).then(res => {
        this.workflow.cron = res;
      });
    },
    projectChange(project) {
      this.workflow.parent_id = "";
      if (!project) {
        this.workflowOptions = [];
        return;
      }
      this.$http.workflow.getWorkflowOptions({ project_id: project }).then(res => {
        this.workflowOptions = res;
      });
    }
  }
};
</script>
<style lang="scss">
.base-setting {
  height: calc(100vh - 120px);
  overflow: auto;
}
.config-item + .config-item {
  margin-top: 8px;
}
</style>
